import React, { useState} from 'react'
/* 导入中央数据管理器 */
import store from '../store/index'
// 创建函数组件,
// rfce
function Redux01() {
    /* 现在是能获取到共享的装填了,需要修改本页面的状态 
    将共享的状态,转化成页面状态
    */
    let [state, setState] = useState(store.getState())
    /* 解构状态,页面用到哪些解构哪些 */
    const { str, arr} = state
    const chg = (event) => {
        /* 触发的事件 target 当前的dom元素 */
        const action={ type:"chginp", payload:event.target.value}
        // 调用dispatch 改变共享的数据
        store.dispatch(action)
    }
    // 数据发生变化 subscribe 监听模式,    
    const chgstate = () => {     
        setState(store.getState())
    }                                                
    const add = () => {
         const action={ type:"add", payload:str}
         // 调用dispatch 改变共享的数据
         store.dispatch(action)
    }
    
    store.subscribe(chgstate)
    return (
        /* anf 匿名箭头函数 */
        <div>
            <input type="text" value={str} onChange={chg} />
            <button onClick={add} > 添加数据 </button>
            <ul>
                {                 
                    arr.map((item,i) => <li key={i} >{item}</li>)                    
                }
            </ul>

        </div>
    )
}
export default Redux01
